<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人信息验证</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css">
		<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jqueryValidation/jqueryvalidate.js"></script>
		<script src="../js/jqueryValidation/messages_zh.js"></script>
		<style type="text/css">
			.header p.header_title{
				font-size: 16px;
			    letter-spacing: 2px;
			    /* line-height: 30px; */
			    /* padding: 30px 0 10px 0; */
			    width: 40%;
			    height: 40px;
			    line-height: 40px;
			    background: #eef7ff;
			    border-radius: 50px 50px;
			    margin-left: 30%;
			    margin-top: 25px;
			}
			.page{
				width: 100%;
				height: 100%;
				position:absolute;
				z-index: 1;
			}
			.success{
				width: 100%;
				height: 100%;
				position:absolute;
				z-index: 2;
				background:rgba(0,0,0,0.7);
			}
			
			.footer{
				/*position: absolute;*/
				bottom: 100px;
			}
			.footer .mui-btn-block{
				width: 80%;
				margin-left: 10%;
				padding: 8px 0;
				border-radius: 10px;
			}
					
			.mui-input-group{
				background: rgba(0,0,0,0);
			}
			.mui-input-group:before{
				background: rgba(0,0,0,0);
			}
			.mui-input-group .mui-input-row:after{
				background: rgba(0,0,0,0);
			}
			.mui-input-group:after{
				background: rgba(0,0,0,0);
			}
			.success .icon{
				width: 100px;
				height: 100px;
				border-radius: 100% 100%;
				background: #3Baba0;
				position:relative;
				left: 50%;
				margin-left: -50px;
				top: 15%;
			}
			.success p{
				color: #ffffff;
				padding: 5px 0; 
				font-size: 18px;
				letter-spacing: 2px;
			}
			.success p.p1{
				margin-top: 35%;
			}
			.success p.p3{
				font-size: 14px;
				margin-top: 10%;
			}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
				position:absolute;
				/*left: -20px;*/
			}
			.mui-input-row label~input[type="text"]{
				margin-left:-35px;
			}
			.mui-input-row{
				clear:none!important;
				margin-top: 5px;
			}
			.h_line{
				width: 100%;
				height: 1px;
				background:#dddddd;
				
			}
			 label.error {
                color: red;
                font-weight: 400;
                text-align: left;
                width: 100%;
            }
            .mui-radio input[type=radio]:checked:before{
				content: '\e442';
			}

	</style>
	</head>

	<body>
		<div class="page">
			<div class="header">
				<p class="header_title t-c">个人信息验证</p>

			</div>
			<div class="content">
				<form id="verifitateForm" method="post">
					<div class="mui-input-row username">
						<label>姓名：</label>
						<input type="number" minlength="2" required class="mui-input-clear" id="username" name="username" placeholder="请输入您的姓名">
					</div>
					<div class="h_line"></div>
					<div class="mui-input-row phone">
						<label>电话：</label>
						<input type="text" isMobile="true" required id="phone" name="phone" class="mui-input-clear" placeholder="请输入您的电话号码">
					</div>
					<div class="h_line"></div>
					<div class="mui-input-row">
						<label style="width:100%;">职业：</label>
						<div class="mui-input-row mui-radio mui-left" style="width:50%;float: left;">
						  <label>机关事业</label>
						  <input name="radio1" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left" style="width:50%;float: left;">
						  <label>自由职业</label>
						  <input name="radio1" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left" style="width:50%;float: left;">
						  <label>企业</label>
						  <input name="radio1" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left" style="width:50%;float: left;">
						  <label>其他</label>
						  <input name="radio1" type="radio">
						</div>
					</div>
					<div class="h_line"></div>
					<div class="mui-input-row">
						<label style="width:100%;">工作地：</label>
						<div class="mui-input-row mui-radio mui-left" style="width:50%;float: left;">
						  <label>陕西</label>
						  <input name="radio2" type="radio">
						</div>
						<div class="mui-input-row mui-radio mui-left" style="width:50%;float: left;">
						  <label>其他</label>
						  <input name="radio2" type="radio">
						</div>
						
					</div>
				</form>	
			</div>
			<div class="footer">
				<button onclick="submit()" type="button" class="mui-btn mui-btn-primary mui-btn-block">提交</button>
			</div>
        </div>

		<div class="success" style="display: none;">
			<div class="icon">
			</div>
			<p class="p1 t-c">恭喜您获得一次抽奖机会</p>
			<p class="p3 t-c" id="count_down"><span style="font-size: 18px;">&nbsp;3&nbsp;</span>秒后开始抽奖</p>
		</div>
		<script>
			var x=4; //利用了全局变量来执行 
			function go(){ 
				x--; 
				if(x>0){ 
					$("#count_down").find("span").html(x); //每次设置的x的值都不一样了。 
				}else{ 
					window.location.href='luck_draw.html'; 
				} 
			}
			// 提交
			function submit(){
				 $("#verifitateForm").valid();
				 if($("#verifitateForm").valid()){
				 	$(".success").css("display","block");
				 	// onload=function(){ 
						setInterval(go, 1000); 
					// }; 
				 }	
			}
			 // 手机号码验证
			jQuery.validator.addMethod("isMobile", function(value, element) {
				var length = value.length;
				var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
				return  value.length==11||mobile.test(value);
			}, "请正确填写您的手机号码");
			// // 正确答案
			var answer=[];
			mui('.mui-input-group').on('change', 'input', function() {  
			    var value = this.checked?"true":"false";  
			    var currentValue=this.previousElementSibling.innerText;
			    if(value=="true"){
			    	answer.push(currentValue);
			    }else{
			    	var pos = answer.indexOf(currentValue);
			    	if (pos < 0){
					answer.push(currentValue)
					} else {
					answer.splice(pos, 1)
					}
			    }
			    // 最后答案
			    // console.log(answer)
			});
		</script>	
	</body>

</html>